﻿@page "/treemap/label"


@using Syncfusion.Blazor.TreeMap
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the population level of various countries in 2017. The intersect action of leaf item labels can be changed by using the label intersect action in properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see the various label intersect actions available in treemap component. Range color mapping has been provided, and the default legend has been enabled in this example. Tooltip is enabled in this example.</p>
   <p>More information about label can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/labels'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfTreeMap TValue="PopulationDetails" WeightValuePath="Population" Format='N0' EnableGroupingSeparator="true" RangeColorValuePath="Population" DataSource="@LeafDataSource">
        <TreeMapTitleSettings Text="Countries ordered based on Population - 2017"/>
        <TreeMapLeafItemSettings ShowLabels="true" LabelPath="Country" Fill="#FF0000" InterSectAction="@LabelAction">
            <TreeMapLeafColorMappings>
                <TreeMapLeafColorMapping StartRange="100000000" EndRange="10000000000" Label="200M - 1.3M" Color="@LeafColorOne"/>
                <TreeMapLeafColorMapping StartRange="20000000" EndRange="100000000" Label="20M - 200M" Color="@LeafColorTwo"/>
                <TreeMapLeafColorMapping StartRange="100000" EndRange="20000000" Label="0.1M - 20M" Color="@LeafColorThree"/>
            </TreeMapLeafColorMappings>
        </TreeMapLeafItemSettings>
        <TreeMapLegendSettings Visible="true" Mode="LegendMode.Interactive" Width="300px" Height="10" Position="LegendPosition.Top"/>
        <TreeMapTooltipSettings Visible="true" Format="${Country} : ${Population}"/>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href=" https://www.populationpyramid.net/population-size-per-country/2017" target="_blank"> www.populationpyramid.net</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr>
                        <td class="property-text">
                            <div style="width:70%">
                            Label Intersect Action
                            </div>
                        </td>
                        <td>
                            <SfDropDownList DataSource="@LabelActionList" @bind-Value="@LabelActionValue" Width="120px">
                                <DropDownListEvents TItem="LabelDropdownList" TValue="string" ValueChange="LabelActionechange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
       height: 50px;
    }
    td {
        width:50%;
    }
</style>
@code {
    public LabelAlignment LabelAction = LabelAlignment.Trim;
    public string[] LeafColorOne = new string[] { "#4B134F" };
    public string[] LeafColorTwo = new string[] { "#8C304D" };
    public string[] LeafColorThree = new string[] { "#C84B4B" };
    public string LabelActionValue = "Trim";
    public class LabelDropdownList {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<LabelDropdownList> LabelActionList = new List<LabelDropdownList> {
        new LabelDropdownList { Value="Trim", Name="Trim"  },
        new LabelDropdownList { Value="Hide", Name="Hide"  },
        new LabelDropdownList { Value="Wrap", Name="Wrap"  },
        new LabelDropdownList { Value="WrapByWord", Name="WrapByWord" }
    };
    public void LabelActionechange(ChangeEventArgs<string, LabelDropdownList> args) {
        LabelActionValue = args.Value;
        if (args.Value == "Trim") {
            LabelAction = LabelAlignment.Trim;
        }
        else if (args.Value == "Hide") {
            LabelAction = LabelAlignment.Hide;
        }
        else if (args.Value == "Wrap") {
            LabelAction = LabelAlignment.Wrap;
        }
        else {
            LabelAction = LabelAlignment.WrapByWord;
        }
    }
    public class PopulationDetails {
        public string Country { get; set; }
        public int Population { get; set; }
    }
    public List<PopulationDetails> LeafDataSource { get; set; } = new List<PopulationDetails> {
        new PopulationDetails { Country="China", Population=1388232693 },
        new PopulationDetails { Country="India", Population=1342512706 },
        new PopulationDetails { Country="United States of America", Population=326474013 },
        new PopulationDetails { Country="Indonesia", Population=263510146 },
        new PopulationDetails { Country="Brazil",  Population=211243220 },
        new PopulationDetails { Country="Pakistan", Population=196744376 },
        new PopulationDetails { Country="Nigeria", Population=191835936 },
        new PopulationDetails { Country="Bangladesh", Population=164827718 },
        new PopulationDetails { Country="Russian Federation", Population=143375006 },
        new PopulationDetails { Country="Mexico", Population=130222815 },
        new PopulationDetails { Country="Japan", Population=126045211 },
        new PopulationDetails { Country="Ethiopia", Population=104344901 },
        new PopulationDetails { Country="Philippines", Population=103796832 },
        new PopulationDetails { Country="Viet Nam", Population=95414640 },
        new PopulationDetails { Country="Egypt", Population=95215102 },
        new PopulationDetails { Country="D.R. Congo", Population=82242685 },
        new PopulationDetails { Country="Iran", Population=80945718 },
        new PopulationDetails { Country="Germany", Population=80636124 },
        new PopulationDetails { Country="Turkey", Population=80417526 },
        new PopulationDetails { Country="Thailand", Population=68297547 },
        new PopulationDetails { Country="United Kingdom", Population=65511098 },
        new PopulationDetails { Country="France", Population=64938716 },
        new PopulationDetails { Country="Italy", Population=59797978 },
        new PopulationDetails { Country="Tanzania", Population=56877529 },
        new PopulationDetails { Country="South Africa", Population=55436360 },
        new PopulationDetails { Country="Myanmar", Population=54836483 },
        new PopulationDetails { Country="Republic of Korea", Population=50704971 },
        new PopulationDetails { Country="Colombia", Population=49067981 },
        new PopulationDetails { Country="Kenya", Population=48466928 },
        new PopulationDetails { Country="Spain", Population=46070146 },
        new PopulationDetails { Country="Ukraine", Population=44405055 },
        new PopulationDetails { Country="Argentina", Population=44272125 },
        new PopulationDetails { Country="Sudan", Population=42166323 },
        new PopulationDetails { Country="Uganda", Population=41652938 },
        new PopulationDetails { Country="Algeria", Population=41063753 },
        new PopulationDetails { Country="Iraq", Population=38654287 },
        new PopulationDetails { Country="Poland", Population=38563573 },
        new PopulationDetails { Country="Canada", Population=36626083 },
        new PopulationDetails { Country="Morocco", Population=35241418 },
        new PopulationDetails { Country="Afghanistan", Population=34169169 },
        new PopulationDetails { Country="Saudi Arabia", Population=32742664 },
        new PopulationDetails { Country="Peru", Population=32166473 },
        new PopulationDetails { Country="Venezuela", Population=31925705 },
        new PopulationDetails { Country="Malaysia", Population=31164177 },
        new PopulationDetails { Country="Uzbekistan", Population=30690914 },
        new PopulationDetails { Country="Mozambique", Population=29537914 },
        new PopulationDetails { Country="Nepal", Population=29187037 },
        new PopulationDetails { Country="Ghana", Population=28656723 },
        new PopulationDetails { Country="Yemen", Population=28119546 },
        new PopulationDetails { Country="Angola", Population=26655513 },
        new PopulationDetails { Country="Madagascar", Population=25612972 },
        new PopulationDetails { Country="Dem Peoples Republic of Korea", Population=25405296 },
        new PopulationDetails { Country="Australia", Population=24641662 },
        new PopulationDetails { Country="Cameroon", Population=24513689 },
        new PopulationDetails { Country="Côte dIvoire", Population=23815886 },
        new PopulationDetails { Country="Taiwan", Population=23405309 },
        new PopulationDetails { Country="Niger", Population=21563607 },
        new PopulationDetails { Country="Sri Lanka", Population=20905335 },
        new PopulationDetails { Country="Romania", Population=19237513 },
        new PopulationDetails { Country="Burkina Faso", Population=19173322 },
        new PopulationDetails { Country="Syrian Arab Republic", Population=18906907 },
        new PopulationDetails { Country="Mali", Population=18689966 },
        new PopulationDetails { Country="Chile", Population=18313495 },
        new PopulationDetails { Country="Malawi", Population=18298679 },
        new PopulationDetails { Country="Kazakhstan", Population=18064470 },
        new PopulationDetails { Country="Zambia", Population=17237931 },
        new PopulationDetails { Country="Netherlands", Population=17032845 },
        new PopulationDetails { Country="Guatemala", Population=17005497 },
        new PopulationDetails { Country="Ecuador", Population=16625776 },
        new PopulationDetails { Country="Zimbabwe", Population=16337760 },
        new PopulationDetails { Country="Cambodia", Population=16076370 },
        new PopulationDetails { Country="Senegal", Population=16054275 },
        new PopulationDetails { Country="Chad", Population=14965482 },
        new PopulationDetails { Country="Guinea", Population=13290659 },
        new PopulationDetails { Country="South Sudan", Population=13096190 },
        new PopulationDetails { Country="Rwanda", Population=12159586 },
        new PopulationDetails { Country="Burundi", Population=11936481 },
        new PopulationDetails { Country="Tunisia", Population=11494760 },
        new PopulationDetails { Country="Benin", Population=11458611 },
        new PopulationDetails { Country="Belgium", Population=11443830 },
        new PopulationDetails { Country="Somalia", Population=11391962 },
        new PopulationDetails { Country="Cuba", Population=11390184 },
        new PopulationDetails { Country="Bolivia", Population=11052864 },
        new PopulationDetails { Country="Haiti", Population=10983274 },
        new PopulationDetails { Country="Greece", Population=10892931 },
        new PopulationDetails { Country="Dominican Republic", Population=10766564 },
        new PopulationDetails { Country="Czech Republic", Population=10555130 },
        new PopulationDetails { Country="Portugal", Population=10264797 },
        new PopulationDetails { Country="Azerbaijan", Population=9973697 },
        new PopulationDetails { Country="Sweden", Population=9920624 },
        new PopulationDetails { Country="Hungary", Population=9787905 },
        new PopulationDetails { Country="Belarus", Population=9458535 },
        new PopulationDetails { Country="United Arab Emirates", Population=9397599 },
        new PopulationDetails { Country="Tajikistan", Population=8858115 },
        new PopulationDetails { Country="Serbia", Population=8776940 },
        new PopulationDetails { Country="Austria", Population=8592400 },
        new PopulationDetails { Country="Switzerland", Population=8454083 },
        new PopulationDetails { Country="Israel", Population=8323248 },
        new PopulationDetails { Country="Honduras", Population=8304677 },
        new PopulationDetails { Country="Papua New Guinea", Population=7933841 },
        new PopulationDetails { Country="Jordan", Population=7876703 },
        new PopulationDetails { Country="Togo", Population=7691915 },
        new PopulationDetails { Country="China Hong Kong SAR", Population=7401941 },
        new PopulationDetails { Country="Bulgaria", Population=7045259 },
        new PopulationDetails { Country="Laos", Population=7037521 },
        new PopulationDetails { Country="Paraguay", Population=6811583 },
        new PopulationDetails { Country="Sierra Leone", Population=6732899 },
        new PopulationDetails { Country="Libya", Population=6408742 },
        new PopulationDetails { Country="Nicaragua", Population=6217796 },
        new PopulationDetails { Country="El Salvador", Population=6167147 },
        new PopulationDetails { Country="Kyrgyzstan", Population=6124945 },
        new PopulationDetails { Country="Lebanon", Population=6039277 },
        new PopulationDetails { Country="Singapore", Population=5784538 },
        new PopulationDetails { Country="Denmark", Population=5711837 },
        new PopulationDetails { Country="Finland", Population=5541274 },
        new PopulationDetails { Country="Turkmenistan", Population=5502586 },
        new PopulationDetails { Country="Eritrea", Population=5481906 },
        new PopulationDetails { Country="Slovakia", Population=5432157 },
        new PopulationDetails { Country="Norway", Population=5330800 },
        new PopulationDetails { Country="Central African Republic", Population=5098826 },
        new PopulationDetails { Country="State of Palestine", Population=4928225 },
        new PopulationDetails { Country="Costa Rica", Population=4905626 },
        new PopulationDetails { Country="Congo", Population=4866243 },
        new PopulationDetails { Country="Ireland", Population=4749153 },
        new PopulationDetails { Country="Oman", Population=4741305 },
        new PopulationDetails { Country="Liberia", Population=4730437 },
        new PopulationDetails { Country="New Zealand", Population=4604871 },
        new PopulationDetails { Country="Mauritania", Population=4266448 },
        new PopulationDetails { Country="Croatia", Population=4209815 },
        new PopulationDetails { Country="Kuwait", Population=4099932 },
        new PopulationDetails { Country="Republic of Moldova", Population=4054640 },
        new PopulationDetails { Country="Panama", Population=4051284 },
        new PopulationDetails { Country="Georgia", Population=3972532 },
        new PopulationDetails { Country="Bosnia and Herzegovina", Population=3792759 },
        new PopulationDetails { Country="Puerto Rico", Population=3679086 },
        new PopulationDetails { Country="Uruguay", Population=3456877 },
        new PopulationDetails { Country="Mongolia", Population=3051900 },
        new PopulationDetails { Country="Armenia", Population=3031670 },
        new PopulationDetails { Country="Albania", Population=2911428 },
        new PopulationDetails { Country="Lithuania", Population=2830582 },
        new PopulationDetails { Country="Jamaica", Population=2813285 },
        new PopulationDetails { Country="Namibia", Population=2568569 },
        new PopulationDetails { Country="Botswana", Population=2343981 },
        new PopulationDetails { Country="Qatar", Population=2338085 },
        new PopulationDetails { Country="Lesotho", Population=2185159 },
        new PopulationDetails { Country="Gambia", Population=2120418 },
        new PopulationDetails { Country="TFYR Macedonia", Population=2083308 },
        new PopulationDetails { Country="Slovenia", Population=2071252 },
        new PopulationDetails { Country="Latvia", Population=1944565 },
        new PopulationDetails { Country="Guinea-Bissau", Population=1932871 },
        new PopulationDetails { Country="Gabon", Population=1801232 },
        new PopulationDetails { Country="Bahrain", Population=1418895 },
        new PopulationDetails { Country="Trinidad and Tobago", Population=1369157 },
        new PopulationDetails { Country="Swaziland", Population=1320356 },
        new PopulationDetails { Country="Estonia", Population=1305755 },
        new PopulationDetails { Country="Mauritius", Population=1281353 },
        new PopulationDetails { Country="Timor-Leste", Population=1237251 },
        new PopulationDetails { Country="Cyprus", Population=1187575 },
        new PopulationDetails { Country="Djibouti", Population=911382 },
        new PopulationDetails { Country="Fiji", Population=902547 },
        new PopulationDetails { Country="Equatorial Guinea", Population=894464 },
        new PopulationDetails { Country="Réunion", Population=873356 },
        new PopulationDetails { Country="Comoros", Population=825920 },
        new PopulationDetails { Country="Bhutan", Population=792877 },
        new PopulationDetails { Country="Guyana", Population=774407 },
        new PopulationDetails { Country="Montenegro", Population=626250 },
        new PopulationDetails { Country="China Macao SAR", Population=606384 },
        new PopulationDetails { Country="Solomon Islands", Population=606215 },
        new PopulationDetails { Country="Western Sahara", Population=596021 },
        new PopulationDetails { Country="Luxembourg", Population=584103 },
        new PopulationDetails { Country="Suriname", Population=552112 },
        new PopulationDetails { Country="Cabo Verde", Population=533468 },
        new PopulationDetails { Country="Guadeloupe", Population=472462 },
        new PopulationDetails { Country="Brunei Darussalam", Population=434448 },
        new PopulationDetails { Country="Malta", Population=420521 },
        new PopulationDetails { Country="Bahamas", Population=397164 },
        new PopulationDetails { Country="Martinique", Population=396071 },
        new PopulationDetails { Country="Maldives", Population=375867 },
        new PopulationDetails { Country="Belize", Population=374651 },
        new PopulationDetails { Country="Iceland", Population=334303 },
        new PopulationDetails { Country="French Polynesia", Population=288685 },
        new PopulationDetails { Country="Barbados", Population=285744 },
        new PopulationDetails { Country="French Guiana", Population=282761 },
        new PopulationDetails { Country="Vanuatu", Population=276331 },
        new PopulationDetails { Country="New Caledonia", Population=269736 },
        new PopulationDetails { Country="Mayotte", Population=253068 },
        new PopulationDetails { Country="Sao Tome and Principe", Population=198481 },
        new PopulationDetails { Country="Samoa", Population=195743 },
        new PopulationDetails { Country="Saint Lucia", Population=187768 },
        new PopulationDetails { Country="Guam", Population=174214 },
        new PopulationDetails { Country="Channel Islands", Population=165235 },
        new PopulationDetails { Country="Curaçao", Population=159987 },
        new PopulationDetails { Country="Kiribati", Population=116405 },
        new PopulationDetails { Country="Saint Vincent and the Grenadines", Population=109895 },
        new PopulationDetails { Country="Grenada", Population=107850 },
        new PopulationDetails { Country="Tonga", Population=107797 },
        new PopulationDetails { Country="United States Virgin Islands", Population=106574 },
        new PopulationDetails { Country="Micronesia (Fed. States of)", Population=105566 },
        new PopulationDetails { Country="Aruba", Population=104588 },
        new PopulationDetails { Country="Seychelles", Population=97539 },
        new PopulationDetails { Country="Antigua and Barbuda", Population=93659 },
    };
} 